<template>
  <k-list :is-empty="!list.length" :loading="loading">
    <view class="flex h-[160rpx] mb-4 text-[22rpx] text-[#9A9A9A]" v-for="(item, index) in list" :key="index"
      @click="handleSelect(index)">
      <view class="denomination rounded-l-[16rpx]">
        <view class="text-base">

          <text class="text-[66rpx] font-bold relative text-center">
            <text class="absolute left-[-14rpx] w-full">
              <text class="text-sm">￥</text>
              <text>{{ parseFloat(item.money) }}</text>
            </text>
            <text class="opacity-0">{{ max }}</text>
          </text>
        </view>
        <view class="">{{ item[conditionKey] }}</view>
      </view>

      <view class="flex flex-1 items-center just border-l-0 border border-solid border-[#E8E8E8] pl-4">
        <view class="flex-1">
          <view class="text-base text-sm">{{ item.name }}</view>
          <view class="mt-1">{{ item[timeKey] }}</view>
          <view class="mt-1">{{ item[sceneKey] }}</view>
        </view>

        <view class="mr-[20rpx]">
          <view v-if="selected">
            <radio class="transform scale-80" color="var(--wot-color-theme)" :checked="index == state.current"></radio>
          </view>
          <template v-else>
            <view v-if="isGet && !item.is_receive" class="btn get" @click.stop="handleGet(item.id, index)">
              领取
            </view>
            <view v-else-if="item.status == 0" class="btn go-used" @click.stop="emit('go')">去使用</view>
            <view v-else-if="item.status == 1" class="text-[#9A9A9A]">已使用</view>
            <view v-else-if="item.status == 2" class="text-[#9A9A9A]">已过期</view>

          </template>
        </view>
      </view>
    </view>
  </k-list>
</template>

<script setup>
import { fetchGetCoupon } from '@/service/course'
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  conditionKey: {
    type: String,
    default: 'condition'
  },
  sceneKey: {
    type: String,
    default: 'use_scene'
  },
  timeKey: {
    type: String,
    default: 'effective_time'
  },
  selected: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  isGet: {
    type: [Boolean, Number],
    default: false
  }
})

const state = ref({
  current: -1,
})

const max = computed(() => {
  return props.list.reduce((max, current) => {
    return String(parseFloat(current.money) || '').length > String(max).length ? current.money : max
  }, '')
})

const emit = defineEmits(['select', 'go', 'get'])

function handleGet(id, i) {
  fetchGetCoupon({ id }).then((res) => {
    emit('get', res)
  })
}

function handleSelect(i) {
  if (!props.selected) return
  state.value.current = i
  emit('select', props.list[i])
}
</script>

<style lang="scss" scoped>
.denomination {
  @apply flex justify-center items-center flex-col px-1;
  min-width: 180rpx;
  background: linear-gradient(180deg, #fff3d8 0%, #ffe7bb 100%);
}

.btn {
  @apply px-2.5 py-1 text-xs;
}

.go-used {
  @apply rounded-0.5 border border-solid border-primary text-base;
}

.get {
  @apply text-white bg-primary;

}
</style>
